<template>
  <view v-if="detail">
    <t-header @back="clickNavBackFn">委托详情</t-header>

    <tui-list-cell>
      <view class="flex justify-between align-center">
        <view class="text-gray">委托股票</view>
        <view class="flex align-center margin-top-xs">
          <image
            class="tag"
            :src="`/static/images/icons/${getMarketCode(detail.allcode)}.png`"
            mode=""
          ></image>
          <text class="text-sm">{{ detail.title }}({{ detail.code }})</text>
        </view>
      </view>
    </tui-list-cell>

    <tui-list-cell>
      <view class="flex justify-between align-center">
        <view class="text-gray">买卖类别</view>
        <view :class="detail.is_sell == 0 ? 'text-red' : 'text-green'">
          证券{{ detail.is_sell == 0 ? '买入' : '卖出' }}
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell>
      <view class="flex justify-between align-center">
        <view class="text-gray">成交类型</view>
        <view>挂单</view>
      </view>
    </tui-list-cell>
    <tui-list-cell>
      <view class="flex justify-between align-center">
        <view class="text-gray">委托手数</view>
        <view>
          {{ detail.canBuy }}
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell>
      <view class="flex justify-between align-center">
        <view class="text-gray">委托股数</view>
        <view>
          {{ detail.number }}
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell>
      <view class="flex justify-between align-center">
        <view class="text-gray">委托价格</view>
        <view>
          {{ detail.buyprice }}
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell v-if="detail.is_buy == 1">
      <view class="flex justify-between align-center">
        <view class="text-gray">委托倍数</view>
        <view>
          {{ detail.multiplying }}
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell>
      <view class="flex justify-between align-center">
        <view class="text-gray">市值</view>
        <view>
          {{ detail.cityValue }}
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell>
      <view class="flex justify-between align-center">
        <view class="text-gray">委托时间</view>
        <view>
          {{ detail.createtime_name }}
        </view>
      </view>
    </tui-list-cell>

    <view class="padding">
      <tui-button
        :loading="submiting"
        :disabled="submiting"
        type="theme"
        @click="cancle"
        >取消委托</tui-button
      >
    </view>
  </view>
</template>

<script setup>
  import { ref, inject } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';

  import { cancleEntrust } from '@/api/user.js';
  import { getMarketCode } from '@/utils/stock.js';

  import THeader from '@/components/views/t-header/index.vue'; // 头部组件

  const tui = inject('tui');

  const detail = ref(null);
  const submiting = ref(false);

  onLoad((t) => {
    if (t.data) {
      detail.value = JSON.parse(t.data);
    }
  });

  // 点击返回
  const clickNavBackFn = () => {
    uni.navigateBack();
  };

  const cancle = () => {
    submiting.value = true;
    tui.modal(null, '确定要取消该委托吗？', true, (e) => {
      if (e) {
        cancleEntrust({
          id: detail.value.id,
          allcode: detail.value.allcode,
          waystatus: 1,
        }).then((res) => {
          submiting.value = false;
          tui.modal(null, res.msg, false, () => {
            uni.navigateBack();
          });
        });
      } else {
        submiting.value = false;
      }
    });
  };
</script>

<style lang="scss" scoped>
  .tag {
    width: 36rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }
  .tag {
    width: 36rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }
</style>
